<template>
	<view class="container">
		<view class="haibao">
			<image :src="info.image"></image>
		</view>
		<view class="box">
			<view class="title">
				{{info.productName}}
			</view>
			<view class="fl_al2 dandu">
				<view class="name">
					温度
				</view>
				<view class="sonlist fl_al">
					<view :class="form.temperature==item.codeName?'son yanse':'son'" v-for="item in wd"
						@click="addwd(item.codeName)">
						{{item.codeName}}
					</view>
				</view>
			</view>
			<view class="fl_al2 dandu">
				<view class="name">
					甜度
				</view>
				<view class="sonlist fl_al2">
					<view :class="form.sweetness==item.codeName?'son yanse':'son'" v-for="item in td"
						@click="addtd(item.codeName)">
						{{item.codeName}}
					</view>
				</view>
			</view>
			<view class="fl_al2 dandu">
				<view class="name">
					小料
				</view>
				<view class="sonlist fl_al2">
					<view :class="form.condiment==item.name?'son yanse':'son'" v-for="item in xl"
						@click="addxl(item.name)">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="kuang2" style="margin-top: 22rpx;">
				<view class="xqname">
					商品详情
				</view>
				<view class="xq">{{info.description}}</view>
			</view>
		</view>
		<view class="btns" style="border-top: 1px solid #707070;padding-top: 20rpx;">
			<view class="fl_ju">
				<text>￥{{(info.price/100)*form.quantity}}</text>
				<u-number-box v-model="form.quantity">
					<view slot="minus" class="minus">
						<u-icon name="minus" size="12"></u-icon>
					</view>
					<text slot="input" style="width: 50px;text-align: center;" class="input">{{form.quantity}}</text>
					<view slot="plus" class="plus">
						<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
					</view>
				</u-number-box>
			</view>
			<view class="kouwei">
				{{form.condiment || '小料'}}/{{form.sweetness|| '甜度'}}/{{form.temperature|| '温度'}}
			</view>
			<u-divider></u-divider>
			<!-- 	<view class="btn">
					<u-button text="立即购买" shape="circle" @click="goumai"
						:customStyle='{backgroundColor: "#fff",border:"1px solid #000000"}'></u-button>
				</view> -->
			<view class="btn">
				<u-button text="加入购物车" @click="add" shape="circle"
					color="linear-gradient(to right, #195af4,#005DFF)"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		frontInfo,
		dataDictionaryList,
		condimentList,
		shoppingCartAdd,
		orderProductAdd
	} from '@/api/url.js'
	export default {
		data() {
			return {
				value: 1,
				form: {
					briefDescription: '',
					condiment: '',
					image: '',
					quantity: 1,
					sumPrice: 0,
					sweetness: '',
					temperature: '',
					userId: 3
				},
				token: uni.getStorageSync('token'),
				info: {},
				wd: [],
				td: [],
				xl: [],
				type: 0
			};
		},
		computed: {

		},
		onShow() {

		},
		onLoad(options) {
			this.form.productId = options.id
			this.type = options.type
			frontInfo({
				id: options.id
			}, this.token).then(res => {
				console.log(res.data.data)
				this.info = res.data.data
				this.form.briefDescription = this.info.briefDescription
				this.form.image = this.info.image
				this.form.price = this.info.price
				this.form.productName = this.info.productName
				this.zidain()
				this.tiandu()
				this.xiaoliao()
			})
		},
		methods: {
			goumai() {
				this.form.sumPrice = Number(this.form.price) * Number(this.form.quantity)
				console.log(this.form)
				shoppingCartAdd(this.form, this.token).then(res => {
					if (res.data.code == 200) {
						uni.navigateTo({
							url: '/pages/index/submit?type=' + this.type
						})
					}
				})
			},
			addxl(e) {
				this.form.condiment = e
				console.log(this.form.condiment)
			},
			addtd(e) {
				this.form.sweetness = e
				console.log(this.form.sweetness)
			},
			addwd(e) {
				this.form.temperature = e
				console.log(this.form.temperature)
			},
			// 温度
			zidain() {
				dataDictionaryList({
					ids: this.info.temperatureTemplate,
					codeType: 'wd'
				}, this.token).then(res => {
					console.log(res.data.rows)
					this.wd = res.data.rows
				})
			},
			// 甜度
			tiandu() {
				dataDictionaryList({
					ids: this.info.sweetnessTemplate,
					codeType: 'td'
				}, this.token).then(res => {
					console.log(res.data.rows)
					this.td = res.data.rows
				})
			},
			// 小料
			xiaoliao() {
				condimentList({
					ids: this.info.condimentTemplate,
				}, this.token).then(res => {
					console.log(res.data.rows)
					this.xl = res.data.rows
				})
			},
			add() {
				this.form.sumPrice = Number(this.form.price) * Number(this.form.quantity)
				console.log(this.form)
				shoppingCartAdd(this.form, this.token).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 10000
						})
						setTimeout(function() {
							uni.hideToast()
							uni.navigateBack()
						}, 1000)
					}
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
	}

	.haibao {
		width: 100%;
		height: 486rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.box {
		position: absolute;
		top: 400rpx;
		left: 0;
		right: 0;
		background-color: #fff;
		height: 100rpx;
		z-index: 999;
		border-top-right-radius: 40rpx;
		border-top-left-radius: 40rpx;
		padding: 32rpx;
		box-sizing: border-box;
		color: #333333;

		.title {
			font-size: 38rpx;
			margin-bottom: 71rpx;
		}

		.name {
			font-size: 30rpx;
			margin-right: 32rpx;
		}

		.son {
			background-color: #F6F6F6;
			border-radius: 25rpx;
			padding: 6rpx 29rpx;
			box-sizing: border-box;
			color: #3F4041;
			font-size: 26rpx;
			margin: 0 12rpx 12rpx 0;
		}

		.yanse {
			background-color: #195af4;
			color: #fff;
		}

		.dandu {
			margin-bottom: 30rpx;
		}
	}

	.xqname {
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 35rpx;
	}

	.xq {
		font-size: 30rpx;
		color: #333333;
		line-height: 40rpx;
	}

	.btns {
		background-color: #fff;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
	}



	.btn {
		width: 100%;
		margin: 0 auto;
	}

	.kouwei {
		color: #AAAAAA;
		font-size: 30rpx;
		margin: 10rpx 0;
	}

	.custom-style {
		border: 1px solid #000;

	}

	.sonlist {
		width: 85%;
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;
		@include flex;
		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #195af4;
		border-radius: 50%;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}
</style>